<template>
    <section>
        <div class="cate-container">
            <div class="header flex-box">
                <h4>商品分组</h4>
            </div>
            <div class="cate-con">
                <div class="cate-con__title flex-box flex-box-display">
                    <div class="flex-box">
                        <el-input v-model="categoryName" placeholder="商品分组"></el-input>
                        <el-button type="primary" icon="el-icon-search" @click="getCategoryList"></el-button>
                    </div>
                    <el-button type="primary" @click="dialogShow">新增商品分组</el-button>
                </div>
                <el-table :data="categoryList" v-loading="tableLoading" @sort-change="sortChange">
                    <el-table-column :resizable="false" label="分组名称" prop="name">
                    </el-table-column>
                    <el-table-column :resizable="false" label="创建时间" prop="created_at" sortable="custom">
                    </el-table-column>
                    <el-table-column :resizable="false" label="商品数" prop="goods_num" sortable="custom">
                    </el-table-column>
                    <el-table-column :resizable="false" prop="operation" label="操作" width="250">
                        <template slot-scope="scope">
                            <el-button @click="addItem(scope.$index, scope.row.id)"
                                       size="small" type="primary">增加商品
                            </el-button>
                            <el-button @click="showItem(scope.$index, scope.row.name, scope.row.id)" type="primary" size="small" plain>
                                查看
                            </el-button>
                            <el-button @click="deleteItem(scope.$index, scope.row.id)" type="primary"
                                       size="small" plain>删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination" v-if="page.total">
                    <div>
                        共{{page.count}}页，每页{{pageSize}}条
                    </div>
                    <el-pagination layout="prev, pager, next" :total="page.total" :page-size="pageSize" prev-text="上一页"
                                   next-text="下一页"
                                   @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </div>
        </div>

        <el-dialog
                title="新增商品分组"
                :visible.sync="dialogVisible"
                width="40%">
            <el-form :model="form" label-width="80px">
                <el-form-item label="分组名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogShow">取 消</el-button>
                <el-button type="primary" @click="addCategory">确 定</el-button>
            </span>
        </el-dialog>

        <add-good :show.sync="show" :showId="showId"></add-good>

    </section>
</template>

<script>
    import AddGood from './AddGood'

    export default {
        components: {
            AddGood
        },
        data() {
            return {
                categoryName: '',
                categoryList: [],
                showList: [],

                tableLoading: true,
                dialogVisible: false,

                id: 0,
                show: false,
                showId: 0,
                clearList: null,

                form: {},
                page: {
                    total: null,
                    count: null
                },
                pageSize: 20
            }
        },
        computed: {},
        mounted() {
            this.getCategoryList();
        },
        methods: {
            genItem(data) {
                axios
                    .get('admin_categories', {
                        params: data
                    })
                    .then(res => {
                        this.page.total = res.data.count;
                        this.page.count = Math.ceil(res.data.count / this.pageSize)
                        return res
                    })
                    .then(res => res.data.data)
                    .then(res => {
                        console.log('数据', res)
                        this.categoryList = res;
                        this.tableLoading = false;
                    })
            },
            sortChange(res){
                console.log('后端排序',res)
                const data = {
                    sortBy:res.prop,
                    orderBy: res.order
                }
                console.log('后端数据',data)
                this.genItem(data)
            },
            getCategoryList(pagination=1) {
                const data = {
                    pagination,
                    pageSize: this.pageSize,
                    name: ['like', `%${this.categoryName}%`],
                };
                this.genItem(data)
            },
            deleteItem(index, id) {
                this.$confirm('是否确认删除该分组?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(() => {
                        return axios
                            .post(`admin_categories/${id}`, {_method: 'DELETE'})
                            .then(
                                res => (res.data.status === 1 ? Promise.resolve() : Promise.reject(res.data.msg))
                            );
                    })
                    .then(() => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getCategoryList();
                    })
                    .catch(err => {
                        if (err !== 'cancel') {
                            this.$message.error(err);
                        }
                    });
            },
            dialogShow() {
                this.dialogVisible = !this.dialogVisible;
            },
            addCategory() {
                axios
                    .post('admin_categories', {
                        name: this.form.name
                    })
                    .then(res => {
                        return res.data.status === 1 ? Promise.resolve() : Promise.reject(res.data.msg);
                    })
                    .then(() => {
                        this.$message({
                            type: 'success',
                            message: '添加成功!'
                        });
                        this.dialogShow();
                        this.getCategoryList();
                    })
                    .catch(err => {
                        this.$message({
                            type: 'error',
                            message: `添加失败 ${err}`
                        });
                    });
            },
            addItem(index, id) {
                this.showId = id;
                this.show = true;
            },
            showItem(index, name, id) {
                this.$router.push({name: 'GoodsList', query: {name:name, id: id}})
            },
            handleCurrentChange(current) {
                this.getCategoryList(current);
            }
        }
    }
</script>
<style scoped>
    .cate-container {
        min-height: calc(100vh - 92px);
    }

    .flex-box {
        display: flex;
    }

    .flex-box-display {
        justify-content: space-between;
    }

    .header {
        padding: 10px;

        background: #FFFFFF;
    }

    .cate-con {
        min-height: calc(93vh - 92px);

        margin: 10px;
        padding: 20px;
        background: #FFFFFF;
    }

    .cate-con__title {
        padding: 0 20px 20px 0;
        border-bottom: 1px dashed #D8D8D8;
    }

    .pagination {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
    }
</style>
<style>
    .el-table {
        width: 100%;
        min-height: 62vh;
    }

    .el-dialog__header {
        text-align: center;
        padding: 11px 20px 11px 20px;
        background: #3F7DFF;
    }

    .el-dialog__title {
        color: #FFFFFF;
    }

    .el-dialog__headerbtn {
        /*display: none*/
        width: 16px;
        height: 16px;

        background: #FFFFFF;
        border-radius: 8px;

        line-height: 16px;
        text-align: center;
    }

    .el-dialog__headerbtn {
        top: 10px;
    }
</style>